<template>
  <client-only>
    <div class="body">
      <div
        class="box"
        :style="`background:url('${gameDetail.infoBg}') no-repeat top center`"
      >
        <!-- 头部标题 -->
        <div class="title">
          <p class="nav">
            <a href="/gameCategory">所有分类</a> > <a href="#">射击游戏</a> >
            <a href="#">{{ gameDetail.name }}</a>
          </p>
          <p style="margin-left: 15px" class="game-title">
            {{ gameDetail.name }}
          </p>
        </div>
        <!-- 详情轮播图 -->
        <div class="details-middle">
          <div class="banner">
            <div
              style="
                position: relative;
                width: 780px;
                height: 390px;
                overflow: hidden;
              "
            >
              <img
                style="width: 100%; height: 365px; box-sizing: border-box"
                :src="bigBannerImg"
                :alt="gameDetail.name"
              />
              <!-- 左箭头 -->
              <div
                class="arrows_left"
                @click="toggleBanner(1)"
                @mouseenter="stopTime"
                @mouseleave="continueTime"
              ></div>
              <!-- 右箭头 -->
              <div
                class="arrows_right"
                @click="toggleBanner(2)"
                @mouseenter="stopTime"
                @mouseleave="continueTime"
              ></div>
            </div>
            <!-- 缩略图 -->
            <div class="banner-nav">
              <div class="smallImg">
                <img
                  v-for="(imgItem, index) in gameDetail.bannersImg"
                  :key="imgItem.id"
                  width="151"
                  height="80"
                  :src="imgItem"
                  :class="{ show_smallImg: index == showBannerIndex }"
                  @click="toggleBanner(0, index)"
                  @mouseenter="stopTime"
                  @mouseleave="continueTime"
                />
              </div>
            </div>
            <!-- 加入购物车 -->
            <div class="buyGame">
              <h2>
                <span v-if="isBuy || gameDetail.price === 0">去玩</span
                ><span v-else>购买</span> {{ gameDetail.name }}
              </h2>
              <div class="game-buy">
                <div>￥{{ gameDetail.price }}</div>
                <div>
                  <a
                    v-if="isBuy || gameDetail.price === 0"
                    href="https://www.4399.com/"
                    >立即去玩</a
                  >
                  <a
                    v-else
                    :href="`/cart/${gameDetail.id}`"
                    @click.prevent="addGame(gameDetail.id)"
                    >加入购物车</a
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 游戏介绍 -->
          <div class="right-details">
            <img
              style="width: 100%"
              :src="gameDetail.firstImg"
              :alt="gameDetail.name"
            />
            <p>发行时间：{{ gameDetail.issueDate }}</p>
            <p
              class="game-intro"
              v-html="`游戏简介：${gameDetail.introduce}`"
            ></p>
            <p class="game-type">
              游戏标签：
              <a
                href="#"
                v-for="gameType in gameDetail.tab"
                :key="gameType.id"
                >{{ gameType }}</a
              >
            </p>
            <ul class="systemLayout">
              <strong>系统配置</strong>
              <li v-for="item in gameDetail.systemLayout" :key="item.id">
                <span>{{ item.title }}</span
                >： {{ item.content }}
              </li>
            </ul>
          </div>
          <!-- 关于游戏 -->
          <div class="game-about">
            <h3>关于游戏</h3>
            <div class="about-content">
              <div v-html="gameDetail.aboutGame"></div>
            </div>
            <h3>最低配置</h3>
            <ul class="about-configure">
              <li>需要 64 位处理器和操作系统</li>
              <li v-for="item in gameDetail.systemLayout" :key="item.id">
                <span>{{ item.title }}</span
                >： {{ item.content }}
              </li>
            </ul>
            <h3>更多类似产品</h3>
            <div class="about-suggest">
              <div class="bg" v-for="item in recommended" :key="item.id">
                <a :href="'/gameCategory/' + item.id">
                  <img
                    width="155"
                    height="60"
                    :src="item.firstImg"
                    :alt="item.name"
                  />
                </a>
                <p style="color: #80878b">{{ item.name }}</p>
                <p>￥{{ item.price }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </client-only>
</template>

<script>
import gameInfoApi from "@/api/gameInfo";
import recommendedApi from "@/api/recommended";
import indexApi from "@/api/index";
import cookie from "js-cookie";
export default {
  data() {
    return {
      gameDetail: {}, // 用来存储根据id获取到的游戏详情数据
      recommended: {}, //用来存储推荐游戏的数据
      isBuy: false, // 表示是否购买此游戏
      price: {}, //接受用户的金额

      bannerImg: [], //所有的轮播图
      showBannerIndex: 0, //当前展示的轮播图索引
      bigBannerImg: "", // 当前所展示的轮播图
      bannerTime: "", //轮播图自动播放
    };
  },
  mounted() {
    // 通过cookie中的token判断用户是否登录
    const token = cookie.get("gameMall_token");
    if (token) {
      // 调用api获取用户购买游戏状态
      gameInfoApi.getGameById(this.$route.params.id).then((res) => {
        this.isBuy = res.data.isBuy;
      });
    }
    this.getGameById();
    this.initRecommended();

    // 获取轮播图
    this.getBannerImg();
    // 轮播图自动播放
    this.continueTime();
  },
  methods: {
    // 初始化游戏详情页
    getGameById() {
      // 根据游戏id调用游戏详情数据api
      gameInfoApi.getGameById(this.$route.params.id).then((res) => {
        this.gameDetail = res.data;
      });
    },
    // 初始化更多推荐模块
    initRecommended() {
      recommendedApi.getList().then((res) => {
        this.recommended = res.data;
        // console.log(res);
      });
    },
    // 添加至购物车
    addGame(id) {
      const token = cookie.get("gameMall_token");
      if (token) {
        // 跳转到购物车
        console.log(this.id);
        this.$router.push(`/cart/${id}`);
      } else {
        this.$alert("如果想要将该游戏添加至购物车，请先登录", "温馨提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action === "confirm") {
              // 去登录
              this.$router.push("/login");
            }
          },
        });
      }
    },
    // 获取banner图
    getBannerImg() {
      gameInfoApi.getGameById(this.$route.params.id).then((res) => {
        this.bannerImg = res.data.bannersImg;
        // 过滤轮播图
        this.filterBanner();
      });
    },
    // 当前显示的轮播图
    filterBanner() {
      // 获取轮播图第一张图片
      this.bigBannerImg = this.bannerImg[this.showBannerIndex];
    },
    // 临界值判断
    crit() {
      if (this.showBannerIndex >= this.bannerImg.length) {
        this.showBannerIndex = 0;
      } else if (this.showBannerIndex < 0) {
        this.showBannerIndex = this.bannerImg.length - 1;
      }
    },
    // 切换轮播图
    toggleBanner(type, showIndex) {
      // type为1则是向前切换
      // type为2则是向后切换
      if (type == 1) {
        this.showBannerIndex--;
      } else if (type == 2) {
        this.showBannerIndex++;
      } else {
        this.showBannerIndex = showIndex;
      }
      // 临界值判断
      this.crit();
      // 切换轮播
      this.filterBanner();
    },
    // 轮播图自动播放
    continueTime() {
      this.bannerTime = setInterval(() => {
        this.toggleBanner(2);
      }, 2000);
    },
    // 轮播图停止播放
    stopTime() {
      clearInterval(this.bannerTime);
    },
  },
};
</script>
  
  <style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: #ddd;
}

.body {
  width: 100%;
  height: 100%;
  background: #1b2838;
}

.box {
  width: 1200px;
  margin: 0 auto;
  -webkit-box-shadow: 0px 0px 200px #13203b;
  box-shadow: 0px 0px 200px #13203b;
}

.title {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  padding-top: 10px;
}

.box .nav {
  color: #8f98a0;
  font-size: 14px;
  padding-bottom: 5px;
}
.box .nav a {
  color: #8f98a0;
}
.box .nav a:hover {
  color: #fff;
}
.box .game-title {
  font-size: 30px;
  line-height: 46px;
  padding-bottom: 10px;
}
.box .details-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: rgba(0, 0, 0, 0.3);
}
.box .details-middle .banner {
  width: 780px;
}
.box .details-middle .banner .banner-nav {
  padding-top: 10px;
  position: relative;
  padding-left: 15px;
  background-color: rgba(0, 0, 0, 0.3);
}
.box .details-middle .banner .banner-nav .smallImg {
  width: 750px;
  display: flex;
  justify-content: space-between;
}

.box .details-middle .banner .banner-nav .smallImg img {
  border: 2px solid transparent;
}

.box .details-middle .banner .banner-nav .smallImg .show_smallImg {
  border: 2px solid #4d93be;
}
.box .details-middle .banner .banner-nav .left {
  position: absolute;
  top: 30px;
  left: 0;
}
.box .details-middle .banner .banner-nav .right {
  position: absolute;
  top: 30px;
  right: 0;
}
.box .details-middle .right-details {
  width: 380px;

  display: -webkit-box; /*将元素设为盒子伸缩模型显示*/
  -webkit-box-orient: vertical; /*伸缩方向设为垂直方向*/
  -webkit-line-clamp: 16; /*超出3行隐藏，并显示省略号*/
  overflow: hidden;
  /*多行隐藏需要注意div的高度不能设置，让其自动3行隐藏即可*/
}

.box .details-middle .right-details .game-type > a {
  display: inline-block;
  color: #c2ec27;
  border: 1px solid #76c902;
  background: #4c6a21;
  border-radius: 3px;
  font-size: 12px;
  padding: 0 3px;
  margin: 0 3px;
  text-indent: 0;
}
.box .details-middle .right-details .game-intro {
  display: -webkit-box; /*将元素设为盒子伸缩模型显示*/
  -webkit-box-orient: vertical; /*伸缩方向设为垂直方向*/
  -webkit-line-clamp: 5; /*超出3行隐藏，并显示省略号*/
  overflow: hidden;
  /*多行隐藏需要注意div的高度不能设置，让其自动3行隐藏即可*/
}
.box .details-middle .right-details .systemLayout {
  border: 1px solid #4f6aa2c5;
  margin-top: 5px;
  padding: 5px 10px;
  line-height: 20px;
  display: -webkit-box; /*将元素设为盒子伸缩模型显示*/
  -webkit-box-orient: vertical; /*伸缩方向设为垂直方向*/
  -webkit-line-clamp: 11; /*超出3行隐藏，并显示省略号*/
  overflow: hidden;
  /*多行隐藏需要注意div的高度不能设置，让其自动3行隐藏即可*/
}
.box .details-middle .right-details .systemLayout li {
  margin-left: 10px;
  color: rgb(158, 157, 157);
  border-bottom: 1px dashed rgb(143, 143, 143);
  line-height: 26px;
}
.box .details-middle .right-details p {
  text-indent: 2em;
  line-height: 22px;
}

/* 购买游戏 */
.buyGame {
  box-sizing: border-box;
  width: 780px;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.311),
    rgba(255, 255, 255, 0.059)
  );
  border-radius: 0 8px 8px 0;
  position: relative;
  height: 80px;
  padding-left: 80px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  justify-content: space-between;
}

.buyGame .game-buy {
  display: flex;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #000;
  border-radius: 3px;
  margin-right: 30px;
}
.buyGame .game-buy div:first-child {
  width: 80px;
  font-size: 16px;
  text-align: center;
}
.buyGame .game-buy div:last-child {
  padding-top: 1px;
}
.buyGame .game-buy div:last-child a {
  display: inline-block;
  width: 100%;
  background: #76c902;
  width: 120px;
  height: 33px;
  line-height: 33px;
  font-size: 16px;
  text-align: center;
  border: none;
  border-radius: 5px;
  margin-right: 3px;
}

.buyGame .game-buy div:last-child a:hover {
  background: #67ae03f4;
}
/* 关于游戏 */
.game-about {
  padding: 20px;
  width: 800px;
}
.game-about h3 {
  border-bottom: 3px solid #3a6e8a;
  line-height: 30px;
  width: 200px;
  padding: 0 0 5px 5px;
  margin-top: 10px;
}
.game-about .about-content {
  /* width: ; */
  padding: 8px;
}

.game-about .about-configure {
  padding-top: 10px;
}

.game-about .about-configure li {
  margin-left: 10px;
  line-height: 22px;
  color: #acb2b8;
}

.game-about .about-configure li span {
  color: #80878b;
}

.game-about .about-suggest {
  width: 800px;
  display: flex;
  padding-top: 10px;
}

.game-about .about-suggest .bg {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.04);
  padding: 15px;
}
.game-about .about-suggest .bg:hover {
  border: 2px solid #3f7191;
}

.arrows_left,
.arrows_right {
  width: 45px;
  height: 370px;
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  cursor: pointer;
}
/* 左侧按钮 */
.arrows_left {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3) 5%,
    rgba(0, 0, 0, 0) 95%
  );
  left: 0;
}
/* 按钮图标*/
.arrows_left::before,
.arrows_right::before {
  content: "";
  display: block;
  width: 23px;
  height: 36px;
  background: url("https://www.xclove.xyz/gameMallImg/arrows.png");
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
}
.arrows_left::before {
  background: url("https://www.xclove.xyz/gameMallImg/arrows.png");
  background-position: 23px;
}

/* 右侧按钮 */
.arrows_right {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 5%,
    rgba(0, 0, 0, 0.3) 95%
  );
  right: 0;
}
/* 按钮hover */
.arrows_left:hover {
  background: linear-gradient(
    to right,
    rgba(171, 218, 244, 0.3) 5%,
    rgba(171, 218, 244, 0) 95%
  );
}
.arrows_right:hover {
  background: linear-gradient(
    to right,
    rgba(171, 218, 244, 0) 5%,
    rgba(171, 218, 244, 0.3) 95%
  );
}
</style>